<template>
  <div>
    <template v-for="(item, index) in options">
      <template v-if="values.includes(item.value)">
        <span
          v-if="item.raw.listClass === 'default' || item.raw.listClass === ''"
          :key="item.value"
          :index="index"
          :class="item.raw.cssClass"
          >{{ item.label + ' ' }}</span
        >
        <el-tag
          v-else
          :disable-transitions="true"
          :key="item.value + ''"
          :index="index"
          :type="item.raw.listClass"
          :class="item.raw.cssClass"
        >
          {{ item.label + ' ' }}
        </el-tag>
      </template>
    </template>
    <template v-if="unmatch && showValue">
      {{ handleArray(unmatchArray) }}
    </template>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  name: 'DictTag',
  props: {
    options: {
      type: Array,
      default: null
    },
    value: [Number, String, Array],
    // 当未找到匹配的数据时，显示value
    showValue: {
      type: Boolean,
      default: true
    }
  },
  data () {
  },
  mounted () {
    // console.log('options', this.options)
    // console.log('value', this.value)
  },
  computed: {
    values () {
      if (this.value !== null && typeof this.value !== 'undefined') {
        return Array.isArray(this.value) ? this.value : [String(this.value)]
      } else {
        return []
      }
    }
  },
  setup () {
    const unmatchArray = ref([])
    const value = ref(null) // 假设这是从props或其他地方获取的
    const options = ref([]) // 假设这是从props或其他地方获取的

    const unmatch = () => {
      unmatchArray.value = []
      if (value.value !== null && typeof value.value !== 'undefined') {
        // 传入值为非数组
        if (!Array.isArray(value.value)) {
          if (options.value.some(v => v.value === value.value)) return false
          unmatchArray.value.push(value.value)
          return true
        }
        // 传入值为数组
        value.value.forEach(item => {
          if (!options.value.some(v => v.value === item)) {
            unmatchArray.value.push(item)
          }
        })
        return true
      }
      // 没有value不显示
      return false
    }

    return {
      unmatchArray,
      unmatch
    }
  },
  methods: {
    handleArray (array) {
      if (array.length === 0) return ''
      return array.reduce((pre, cur) => {
        return pre + ' ' + cur
      })
    }
  },
  filters: {
  }
}
</script>
<style scoped>
.el-tag + .el-tag {
  margin-left: 10px;
}
</style>
